<template>
  <div class="profile-page">
    <div class="page-header">
      <h1>个人资料</h1>
    </div>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-card title="头像">
          <div class="avatar-section">
            <el-avatar :size="120" :src="user.avatar" :icon="UserFilled" />
            <el-upload
              action="#"
              :show-file-list="false"
              :auto-upload="false"
              @change="handleAvatarChange"
            >
              <el-button type="primary" class="upload-btn">
                更换头像
              </el-button>
            </el-upload>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="16">
        <el-card title="基本信息">
          <el-form ref="formRef" :model="user" label-width="100px">
            <el-form-item label="用户名">
              <el-input v-model="user.username" />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="user.email" />
            </el-form-item>
            <el-form-item label="角色">
              <el-tag :type="user.role === 'admin' ? 'danger' : 'warning'">
                {{ user.role === 'admin' ? '管理员' : '编辑者' }}
              </el-tag>
            </el-form-item>
            <el-form-item label="最后登录">
              <span>{{ formatTime(user.lastLoginAt) }}</span>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSave">
                保存修改
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <el-card title="修改密码" class="password-card">
      <el-form :model="passwordForm" label-width="100px">
        <el-form-item label="当前密码">
          <el-input
            v-model="passwordForm.currentPassword"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleChangePassword">
            修改密码
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { UserFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const authStore = useAuthStore()

const user = reactive({
  username: authStore.user?.username || 'admin',
  email: authStore.user?.email || 'admin@example.com',
  role: authStore.user?.role || 'admin',
  avatar: authStore.user?.avatar || '',
  lastLoginAt: authStore.user?.lastLoginAt
})

const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const formatTime = (time?: string) => {
  if (!time) return '无'
  return new Date(time).toLocaleString('zh-CN')
}

const handleAvatarChange = (file: any) => {
  console.log('更换头像:', file)
  ElMessage.success('头像更新成功')
}

const handleSave = () => {
  ElMessage.success('个人信息保存成功')
}

const handleChangePassword = () => {
  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    ElMessage.error('两次输入的密码不一致')
    return
  }
  ElMessage.success('密码修改成功')
  Object.assign(passwordForm, {
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
  })
}
</script>

<style scoped>
.profile-page {
  padding: 0;
}

.page-header h1 {
  margin: 0 0 24px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.avatar-section {
  text-align: center;
}

.upload-btn {
  margin-top: 16px;
}

.password-card {
  margin-top: 20px;
}
</style> 